<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#007722',
                        secondary: '#009944',
                        neutral: '#f5f5f5',
                        dark: '#333333'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(to right, #f5f5f5, #ffffff);
            }
            .shadow-login {
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .input-focus {
                @apply focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
            }
        }
    </style>
</head>
<body class="bg-gradient-primary min-h-screen flex items-center justify-center p-4">
<div class="login-container bg-white rounded-xl shadow-login w-full max-w-md p-6 sm:p-8">
    <div class="text-center mb-6">
        <h2 class="text-2xl font-bold text-primary mb-2">管理员登录</h2>
        <p class="text-gray-500 text-sm">请输入您的账户信息</p>
    </div>

    <!-- 注册成功提示 -->
    <%
        String registerSuccess = request.getParameter("registerSuccess");
        if ("true".equals(registerSuccess)) {
    %>
    <div class="alert alert-success mb-4 p-3 bg-green-50 border border-green-200 rounded-lg">
        <i class="fa fa-check-circle mr-2 text-green-500"></i>
        <span>注册成功，请使用您的账户登录</span>
    </div>
    <%
        }
    %>

    <!-- 错误消息显示 -->
    <%
        String errorMessage = (String) request.getAttribute("errorMessage");
        if (errorMessage != null) {
    %>
    <div class="alert alert-error mb-4 p-3 bg-red-50 border border-red-200 rounded-lg">
        <i class="fa fa-exclamation-circle mr-2 text-red-500"></i>
        <span><%= errorMessage %></span>
    </div>
    <%
        }
    %>

    <form action="/WebProject/admin/login" method="post" class="space-y-4">
        <!-- 用户名输入框 -->
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="fa fa-user text-gray-400"></i>
            </div>
            <input type="text" name="username" id="username" placeholder="用户名"
                   class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus"
                   required autofocus>
        </div>

        <!-- 密码输入框 -->
        <div class="relative">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                <i class="fa fa-lock text-gray-400"></i>
            </div>
            <input type="password" name="password" id="password" placeholder="密码"
                   class="w-full pl-10 pr-10 py-3 rounded-lg border border-gray-300 input-focus"
                   required>
            <button type="button" id="togglePassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-all-300">
                <i class="fa fa-eye-slash"></i>
            </button>
        </div>

        <!-- 记住用户名 -->
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <input id="remember-username" type="checkbox" class="w-4 h-4 text-primary border-gray-300 rounded focus:ring-primary">
                <label for="remember-username" class="ml-2 text-sm text-gray-600">记住用户名</label>
            </div>

            <a href="${pageContext.request.contextPath}/cjj/admin_forgot_password.jsp">忘记密码</a>
            <% if (request.getAttribute("errorMessage") != null) { %>
            <p style="color: red;"><%= request.getAttribute("errorMessage") %></p>
            <% } %>

        </div>

        <!-- 登录按钮 -->
        <button type="submit" class="w-full bg-primary hover:bg-secondary text-white py-3 px-4 rounded-lg font-medium transition-all-300 hover:shadow-lg hover:shadow-primary/20 flex items-center justify-center">
            <i class="fa fa-sign-in mr-2"></i>
            <span>登录</span>
        </button>
    </form>

    <!-- 底部链接 - 跳转到注册页面 -->
    <div class="mt-6 text-center">
        <p class="text-sm text-gray-600">
            还没有账户?
            <a href="/WebProject/cjj/admin_register.jsp" class="text-primary hover:text-secondary transition-all-300 font-medium">立即注册</a>
        </p>
    </div>
</div>

<script>
    // 密码显示/隐藏功能
    document.getElementById('togglePassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('password');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 记住用户名功能
    document.addEventListener('DOMContentLoaded', function() {
        const rememberCheckbox = document.getElementById('remember-username');
        const usernameInput = document.getElementById('username');

        // 检查本地存储中是否有保存的用户名
        const savedUsername = localStorage.getItem('adminUsername');
        if (savedUsername) {
            usernameInput.value = savedUsername;
            rememberCheckbox.checked = true;
        }

        // 监听复选框变化
        rememberCheckbox.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('adminUsername', usernameInput.value);
            } else {
                localStorage.removeItem('adminUsername');
            }
        });

        // 监听用户名输入变化
        usernameInput.addEventListener('input', function() {
            if (rememberCheckbox.checked) {
                localStorage.setItem('adminUsername', this.value);
            }
        });
    });

    // 添加页面加载动画
    document.addEventListener('DOMContentLoaded', function() {
        const loginContainer = document.querySelector('.login-container');
        loginContainer.classList.add('opacity-0', 'translate-y-4');
        setTimeout(() => {
            loginContainer.classList.remove('opacity-0', 'translate-y-4');
            loginContainer.classList.add('transition-all', 'duration-500');
        }, 100);
    });
</script>
</body>
</html>